<script setup name="myabsent">
import absentHttp from '@/api/absentHttp';
import { ref, reactive, onMounted, computed, watch } from "vue"
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';

let dialogFormVisible = ref(false)
let formLabelWidth = "100px"
let absentFormRef = ref()
let responder = reactive({
    email: '',
    realname: ''
})
let absentform = reactive({
    title: '',
    absent_type_id: null,
    // start_date: '',
    // start_date: '',
    // 时间选择器是一个数组，第一个值为起始时间，第二个值为结束时间
    date_range: [],
    request_content: ''
})

let responder_str = computed(() => {
    if (responder.email) {
        return "[" + responder.email + "]" + responder.realname
    } else {
        return ''
    }
})

let rules = reactive({
    title: [
        { required: true, message: '标题是必填项', trigger: 'blur' },
    ],
    absent_type_id: [
        { required: true, message: '请假类型是必填项', trigger: 'change' },
    ],
    date_range: [
        { required: true, message: '请假时间是必填项', trigger: 'blur' },
    ],
})



const requestAbensts = async (page) => {
    try {
        let absent_data = await absentHttp.getMyAbsents(page)
        // 这里不知道结构可以打印看一下
        // console.log(absent_data)
        let total = absent_data.count
        pagination.total = total
        let results = absent_data.results
        absents.value = results
    } catch (datail) {
        ElMessage.error(detail);
    }
}

let pagination = reactive({
    total: 0,
    page: 1
})

watch(() => pagination.page, (value) => {
    // value就是获取第几页的数据
    requestAbensts(value);
})

let absent_types = ref([])

let absents = ref([])
const onShowDialog = () => {
    absentform.title = ""
    absentform.absent_type_id = null
    absentform.date_range = []
    absentform.request_content = ""
    dialogFormVisible.value = true;
}

const onSubmitAbsent = () => {
    // console.log(absentform)
    absentFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let data = {
                title: absentform.title,
                absent_type_id: absentform.absent_type_id,
                start_date: absentform.date_range[0],
                end_date: absentform.date_range[1],
                request_content: absentform.request_content
            }
            try {
                let absent = await absentHttp.applyAbenst(data)
                absents.value.unshift(absent)
            } catch (detail) {
                ElMessage.error(detail)
            }
            dialogFormVisible.value = false
        }
    })
}

onMounted(async () => {
    try {
        // 获取请假类型
        let absent_type_data = await absentHttp.getAbsentTypes()
        absent_types.value = absent_type_data
        // 获取审批人
        let responder_data = await absentHttp.getResponder()
        Object.assign(responder, responder_data)
        // 获取个人考勤列表
        requestAbensts(1)
    } catch (detail) {
        ElMessage.error(detail)
    }
})
</script>

<template>

    <OAMain title="个人考勤">
        <el-card style="text-align: right">
            <el-button type="primary" @click="onShowDialog"><el-icon>
                    <Plus />
                </el-icon>我要请假</el-button>
        </el-card>
        <el-card>
            <el-table :data="absents">
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="absent_type.name" label="请假类型" />
                <el-table-column prop="request_content" label="原因" />
                <el-table-column prop="create_time" label="发起时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="start_date" label="开始日期" />
                <el-table-column prop="end_date" label="结束日期" />
                <el-table-column label="审批人">
                    <!-- 插槽 -->
                    {{ responder_str }}
                </el-table-column>
                <el-table-column prop="response_content" label="审批意见" />
                <!-- 这里的el-table-column就是子组件， myabsent(my.vue也即本身)就是父组件-->
                <!-- #default="scope"是插槽作用域语法 -->
                <el-table-column prop="response_content" label="状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="danger" v-else>不通过</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>

    <OADialog title="发起请假" v-model="dialogFormVisible" @submit="onSubmitAbsent">
        <el-form :model="absentform" :rules="rules" ref="absentFormRef">
            <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="absentform.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="请假类型" :label-width="formLabelWidth" prop="absent_type_id">
                <el-select v-model="absentform.absent_type_id" placeholder="">
                    <!-- :key需要唯一 -->
                    <el-option v-for="item in absent_types" :label="item.name" :value="item.id" :key="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="请假时间" :label-width="formLabelWidth" prop="date_range">
                <el-date-picker v-model="absentform.date_range" type="daterange" unlink-panels range-separator="到"
                    start-placeholder="起始日期" end-placeholder="截至日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>

            <el-form-item label="理由" :label-width="formLabelWidth">
                <el-input v-model="absentform.request_content" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="审批人" :label-width="formLabelWidth">
                <el-input :value="responder_str" readonly disable autocomplete="off" />
            </el-form-item>
        </el-form>
    </OADialog>
</template>

<style scoped>
.card-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
</style>